import React, { Component } from 'react'

// import { Link, Routes, Route } from 'react-router-dom'
import { Menu, Select, Input ,Typography , Cascader , Col ,Radio,Button} from 'antd'
import { BarChartOutlined, ShareAltOutlined, DotChartOutlined, PictureOutlined ,BarsOutlined } from '@ant-design/icons'
import "./2_App.less"
import EchartLine from './cluster'
import PolarBar from './polarBar/polarBar'
import MyForcemap from './forcemap'
import ParameterArea from './parameterArea'
import emitter from './utils/events'
import {searchPrescription , searchDrug} from './api/api'
import DurgCard from './displayArea/card'
import DisplayArea from './displayArea/displayArea'
import BasicGraph from './basicGraph'

const { Search } = Input;

export default class AppTest extends Component {
  constructor(props) {
    super(props);
    this.state= {
       data:[[],[],[]],
       symptom_relativity_name : ["搜索病症相关度","药物探索关联病症相关度"],
       categories : [],
       title:"",
       content:"",
       highlight_nodes:[],
       mark:['0', '1','2','3','4','5','6','7','8','9','10','11','12','13','14']
    }
  }

  lineHeight = '40px'
  componentDidMount(){
    localStorage.setItem("当前搜索实体类型","病症")
  }

  resetSearchType = (e) =>{
    localStorage.setItem("当前搜索实体类型",e.target.value)
    console.log(e.target.value)
  }

  resetSelectItem = (title , content) =>{
    debugger
    this.title = title
    this.content = content
  }
  
  resetDataSource = async (value) =>{
    debugger
    // var dic = {}
    // localStorage.setItem("searchDic",JSON.stringify(dic))
    let curTarget = localStorage.getItem("当前搜索实体类型")
    if(curTarget == "病症"){
      let relativity = localStorage.getItem("主题疾病相关度")
      let res = await searchPrescription({"node":value,"relativity":relativity})
      if(res.code === 200){
          var curdata = new Array()
          var tdata = JSON.parse(res.data)
          emitter.emit("搜索病症相关度",{nodes:res.search_polar_data.nodes,relativities:res.search_polar_data.relativities})
          // localStorage.setItem("search_polar_data",JSON.stringify(res.search_polar_data))
          localStorage.setItem("target",res.bestmatch)
  
          curdata.push(tdata["nodes"])
          curdata.push(tdata["links"])
          curdata.push(tdata["categories"])
          emitter.emit("addHighLightNodes",{highlight_nodes:res.highlight_nodes})
      //   this.setState({highlight_nodes:res.highlight_nodes})  
        emitter.emit("resetPrescription",{data:curdata})
      //   this.setState({data:curdata})
      }
    }else{
      let res = await searchDrug({"node":value})
      if(res.code === 200){
        var curdata = new Array()
        var tdata = JSON.parse(res.data)

        curdata.push(tdata["nodes"])
        curdata.push(tdata["links"])
        curdata.push(tdata["categories"])
        emitter.emit("addHighLightNodes",{highlight_nodes:res.highlight_nodes})
        //   this.setState({highlight_nodes:res.highlight_nodes})  
        emitter.emit("resetPrescription",{data:curdata})
      }
    }


  };


  render() {
    const { current } = this.state
    const { SubMenu } = Menu
    const { Title } = Typography
    return (
      <div style={{position:'absolute', backgroundColor:"#d9d9d9", top:0, left:0, width:'100%', height:'100%'}}>
        <div className='layout' style={{ position:'absolute', top:'1%', left:'1%', width:'30%', height:'98%'}}>

          <div style={{position:'absolute', top:'0px', left:'0%', width:'100%', height: this.lineHeight, borderBottom:'1px solid #CCC', background: '#353535'}}> 
            <Title level={3} style={{lineHeight:  this.lineHeight, color:'#fff'}}> &nbsp; <DotChartOutlined />&nbsp; 聚类分析视图 </Title>
          </div>
          <div style={{ position: 'absolute', top:'40px', left:'0%', width:'100%', height:'50%'}}>
            <EchartLine/>
          </div>

          <div style={{position:'absolute', top:'53%', left:'0%', width:'100%', height:this.lineHeight, borderBottom:'1px solid #CCC', background: '#353535',marginTop:"30px"}}>
          <Title level={3} style={{lineHeight:  this.lineHeight, color:'#fff'}}> &nbsp; <BarChartOutlined />&nbsp; 相关性视图 </Title>
          </div> 
          <div style={{  position:'absolute', top: '65%', left: '0%', width:'100%', height:'35%', display:'inline-block'}}>
            {/*相关性视图摆放栏*/}
                {this.state.symptom_relativity_name.map((item,k)=>{
                    debugger
                    return (<PolarBar  title={item} > </PolarBar>)
                })}
          </div>

          {/* <div style={{border: '4px solid blue', position:'absolute', top: '83%', left: '0%', width:'100%', height:'17%'}}>
            
          </div> */}

        </div>
        
        <div className='layout' style={{position:'absolute', top:'1%', left:'32%', width:'42%', height:'98%'}}>
          <div style={{ position:'absolute', top:'0px', left:'0%', width:'100%', height: this.lineHeight, borderBottom:'1px solid #CCC', background: '#353535'}}> 
            <Title level={3} style={{lineHeight: this.lineHeight, color:'#fff'}}> &nbsp; <ShareAltOutlined /> &nbsp; 节点链接视图</Title>
          </div>

          <div style={{ position:'absolute', top:this.lineHeight, left:'0%', width:'100%', height:'94%'}}>
            {/* <Graph/> */}
            <div style={{position:'absolute', top:'0px', left:'0%', width:'100%', height:'30px', borderBottom:'1px solid #CCC', background: '#CED4DA'}}/>
            <Title level={5} style={{position:'absolute', left:'1%', top:'0px', width:'35%', color:'#212121'}}>《本草纲目》知识图谱</Title>
            
          </div>
                <MyForcemap resetSelectItem={this.resetSelectItem}/>


                <div style={{ width:'100%', height: this.lineHeight, borderBottom:'1px solid #CCC', background: '#353535',marginBottom:'20px'}}> 
            <Title level={3} style={{lineHeight:  this.lineHeight, color:'#fff'}}> &nbsp; <DotChartOutlined />&nbsp; 查询栏  </Title>
          </div>
          <div>
            <ParameterArea/>
            <div style={{display:"inline-block",width:'30%' ,height:'100%',marginLeft:"10%",verticalAlign:'bottom'}}>
              <Radio.Group defaultValue={"症状"} onChange={this.resetSearchType} >
                <Radio value={"症状"}>症状</Radio>
                <Radio value={"药剂"}>药剂</Radio>
              </Radio.Group>
              <Search placeholder="输入关键字" onSearch={(value)=>this.resetDataSource(value)}    enterButton="搜索" size="large" style={{width: "200px",verticalAlign:'bottom',marginTop:'20px'}} />
            </div>
            
          </div>
          
        </div>

        
        <div className='layout' style={{  position:'absolute', top:'1%', right:'1%', width:'24%', height:'98%'}}>
          <div style={{width:'100%', height:this.lineHeight, borderBottom:'1px solid #CCC', background: '#353535'}}> 
              <Title level={3} style={{lineHeight: this.lineHeight, left:'1%', color: '#fff'}}> &nbsp; <PictureOutlined />&nbsp; 多模态药物信息视图</Title>
          </div>

          <div style={{height:"60%"}}>

            <DurgCard src={"https://cdn.jsdelivr.net/gh/zccc-zccc/bcgmpic@1.1/本草纲目.jpg"}/>
            <DisplayArea />
          </div>
          <div style={{width:'100%', height:this.lineHeight, borderBottom:'1px solid #CCC', background: '#353535'}}> 
              <Title level={3} style={{lineHeight: this.lineHeight, left:'1%', color: '#fff'}}> &nbsp; <PictureOutlined />&nbsp; 知识图谱编辑</Title>
          </div>
          <div style={{height:"32%"}}>
              <div style={{height:'80%'}}>
               <BasicGraph/>

              </div>
              <div style={{verticalAlign:'bottom' ,height:"20%"}}>

                <Radio.Group style={{width:"70%"}}>
                <Radio value={1}>增加&nbsp;&nbsp;</Radio>
                <Radio value={2}>删除&nbsp;&nbsp;</Radio>
                <Radio value={3}>修改&nbsp;&nbsp;</Radio>
              </Radio.Group>
              <Button style={{width:"30%"}}>
                  提交

              </Button>
              </div>
              
          </div> 
          
          

          
        </div>


      </div>
    );
  }
}